<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="110px">
      <el-form-item label="名称：" prop="name">
        <el-input v-model="form.name" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="每行显示：" prop="line">
        <el-input v-model="form.line" placeholder="请输入">
          <template slot="append">个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="是否显示：" prop="show">
        <el-switch v-model="form.show" active-color="#00E266"></el-switch>
      </el-form-item>
    </el-form>

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="handleSubmit()">保 存</el-button>
        <el-button @click="close()">返 回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getClubJobSetInfo, saveClubJobSetInfo } from "@/api/shuiyin/shuiyin";

export default {
  name: "ClubSet",
  data() {
    return {
      // 用户信息
      form: {}
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      getClubJobSetInfo().then((response) => {
        if (response.data) {
          this.form = response.data;
        } else {
          this.form = {
            name: '',
            line: null,
            show: false
          }
        }
      });
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          saveClubJobSetInfo(this.form).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getInfo();
          });
        }
      });
    },
    /** 关闭按钮 */
    close() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({ path: "/speardCenter/clubJob" });
    },
  },
};
</script>
